<script lang="tsx">
/**
 * 帅特龙设备看板
 */
export default {
  name: "device"
}
</script>

<script lang="tsx" setup>
import BodyMoving from "@/components/body-moving/index.vue"
import Header from './components/header-form/index.vue'
import {nextTick, onMounted, onUnmounted, ref} from "vue"
import {processRequest} from "@/frame/request/constructor.ts"
import {DeviceStatusTypeEnum} from "@/pages/device/index.ts"

/**
 * 定时器
 */
const timer = ref()

/**
 * 当前值
 */
const currentValue = ref(0)
/**
 * 加载
 */
const isLoading = ref(false)

/**
 * 数据
 */
const deviceData: any = ref([])

/**
 * 时间
 */
const dateTime = ref()

/**
 * 统计数据
 */
const deviceTotalData = ref({
  runData: 0,
  waitData: 0,
  closeData: 0
})

/**
 * 销毁
 */
onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value)
  }
})

const splitArray = (arr: any, chunkSize: any) => {
  const result = []
  for (let i = 0; i < arr.length; i += chunkSize) {
    result.push(arr.slice(i, i + chunkSize))
  }
  return result
}

/**
 * 修改
 */
const handleChange = (value: any) => {
  dateTime.value = value
  getDeviceData()
}

/**
 * 获取设备数据
 */
const getDeviceData = async () => {
  isLoading.value = true
  const result: any = await processRequest.get("/api/Device/GetDeviceBoardList",
      {
        dataTime: dateTime.value
      })
  result.forEach((item: any) => {
    item.isScrolling = false
    item.isScrolling2 = false
    item.isScrolling3 = false
  })
  deviceTotalData.value.runData = result.filter((item: any) => item.status == DeviceStatusTypeEnum.运行).length
  deviceTotalData.value.waitData = result.filter((item: any) => item.status == DeviceStatusTypeEnum.待机).length
  deviceTotalData.value.closeData = result.filter((item: any) => item.status == DeviceStatusTypeEnum.关机).length

  deviceData.value = result.map((item: any) => {
    return {
      status: item.status,
      deviceCode: item.deviceCode || "-",
      deviceName: item.deviceName || "",
      goodsName: item?.workOrder?.goodsName || "-",
      num_Plan: item?.workOrder?.num_Plan || 0,
      number_Finish: item?.workOrder?.number_Finish || 0,
      moldName: item?.workOrder?.moldName || "-",
      stepName: item?.workOrder?.stepName || "-",
      doingHour: Number((item?.devData?.second_Doing / 3600).toString()?.split(".")[0]) || 0,
      doingMinute: Number((item?.devData?.second_Doing / 60).toString()?.split(".")[0]) || 0,
      waitHour: Number((item?.devData?.second_Wait / 3600).toString()?.split(".")[0]) || 0,
      waitMinute: Number((item?.devData?.second_Wait / 60).toString()?.split(".")[0]) || 0,
      runHour: Number((item?.devData?.second_Run / 3600).toString()?.split(".")[0]) || 0,
      runMinute: Number((item?.devData?.second_Run / 60).toString()?.split(".")[0]) || 0,
      progress: Number((item?.workOrder?.number_Finish / (item?.workOrder?.num_Plan || 1)) > 100 ? 100 : (item?.workOrder?.number_Finish / (item?.workOrder?.num_Plan || 1))) || 0,
      num_day: item?.workOrder?.number_Finish || 0,
      rate: item?.workOrder?.number_UtilizationRate || "0.00%"
    }
  })
  deviceData.value = splitArray(deviceData.value, 15)
  isLoading.value = false
  if (timer.value) {
    clearInterval(timer.value)
  }
  if (deviceData.value) {
    updateAnim()
  }
  nextTick(() => {
    const wrappers = document.querySelectorAll('.middle-top')
    wrappers.forEach((wrapper, index) => {
      const textElement: any = wrapper.querySelector('.middle-top-test')
      const wrapperWidth = wrapper.clientWidth
      const textWidth = textElement.offsetWidth

      if (textWidth > wrapperWidth) {
        deviceData.value[currentValue.value][index].isScrolling = true
      } else {
        deviceData.value[currentValue.value][index].isScrolling = false
      }
    })
  })

  nextTick(() => {
    const wrappers = document.querySelectorAll('.left-content')
    wrappers.forEach((wrapper, index) => {
      const textElement: any = wrapper.querySelector('.content-name')
      const wrapperWidth = wrapper.clientWidth
      const textWidth = textElement.offsetWidth

      if (textWidth > wrapperWidth) {
        deviceData.value[currentValue.value][index].isScrolling2 = true
      } else {
        deviceData.value[currentValue.value][index].isScrolling2 = false
      }
    })
  })

  nextTick(() => {
    const wrappers = document.querySelectorAll('.left-content')
    wrappers.forEach((wrapper, index) => {
      const textElement: any = wrapper.querySelector('.content-bottom')
      const wrapperWidth = wrapper.clientWidth
      const textWidth = textElement.offsetWidth

      if (textWidth > wrapperWidth) {
        deviceData.value[currentValue.value][index].isScrolling3 = true
      } else {
        deviceData.value[currentValue.value][index].isScrolling3 = false
      }
    })
  })
}

/**
 * 挂载运行
 */
onMounted(() => {
  getDeviceData()
})

/**
 * 动画
 */
const updateAnim = () => {
  timer.value = setInterval(() => {
    currentValue.value++
    if (deviceData.value.length === 1) {
      currentValue.value = 0
    } else if (currentValue.value > deviceData.value.length - 1) {
      currentValue.value = 0
      getDeviceData()
    }
  }, 30000)
}
</script>

<template>
  <div class="page-wrap">
    <Header :deviceTotalData="deviceTotalData" @change="handleChange"/>
    <div class="page-body">
      <div v-if="isLoading" class="page-box">
        <body-moving
            class="body-moving"
            height="10%"
            json="/lottie-json/loading.json"
            width="10%"
        />
      </div>
      <template v-else>
        <div v-if="deviceData" v-loading="isLoading" class="body-box">
          <div v-for="(item,index) of deviceData" :key="index" class="body-list">
            <transition mode="out-in" name="device">
              <div v-if="currentValue===index" class="body-list-box">
                <div v-for="(memo,key) of item" :key="key"
                     :class="{'body-item-warning':memo.status === 1,'body-item-close':memo.status === 0}"
                     class="body-item">
                  <div class="item-top">
                    <div class="top-left">
                      <div class="left-img">
                        <img v-if="memo.status === DeviceStatusTypeEnum.运行" alt="" class="img-logout"
                             src="/img/chengbang/运行中@2x.png">
                        <img v-if="memo.status === DeviceStatusTypeEnum.待机" alt="" class="img-logout"
                             src="/img/chengbang/待机@2x.png">
                        <img v-if="memo.status === DeviceStatusTypeEnum.关机" alt="" class="img-logout"
                             src="/img/chengbang/关机@2x.png">
                      </div>
                      <div class="left-content">
                        <div class="content-top">
                          <div class="content-name">{{ memo.deviceName || "-" }}</div>
                        </div>
                        <div :class="{'content-bottom-scroll':memo?.isScrolling3}" class="content-bottom">
                          <div class="content-model">{{ memo.deviceCode || "-" }}</div>
                        </div>
                      </div>
                    </div>
                    <div class="top-middle">
                      <div class="middle-top">
                        <span class="middle-top-test">{{ memo.goodsName || "-" }}</span>
                      </div>
                      <div class="middle-bottom">
                        <el-progress
                            :percentage="memo.progress"
                            :stroke-width="18"
                            :text-inside="true">
                          <template #default>
                            <span style="color:#36DEB6">{{ memo.number_Finish }}</span>/<span>{{ memo.num_Plan }}</span>
                          </template>
                        </el-progress>
                      </div>
                    </div>
                  </div>
                  <div class="item-bottom">
                    <div class="bottom-content">
                      <div class="item-content">
                        <div class="item-data" style="color:white;">
                          {{ memo.num_Plan }}<span
                            class="item-data-small">件</span></div>
                        <div class="item-title">计划数量</div>
                      </div>
                      <div class="item-content">
                        <div class="item-data">
                          {{ memo.doingHour }}<span
                            class="item-data-small">H</span>{{ memo.doingMinute }}<span
                            class="item-data-small">M</span></div>
                        <div class="item-title">开机时长</div>
                      </div>
                      <div class="item-content">
                        <div class="item-data" style="color:#F57A00">{{ memo.waitHour }}<span
                            class="item-data-small">H</span>{{ memo.waitMinute }}<span
                            class="item-data-small">M</span></div>
                        <div class="item-title">待机时长</div>
                      </div>
                    </div>
                    <div class="bottom-line"></div>
                    <div class="bottom-content">
                      <div class="item-content">
                        <div class="item-data" style="color:#00D08F;">
                          {{ memo.number_Finish }}<span
                            class="item-data-small">件</span></div>
                        <div class="item-title">完成数量</div>
                      </div>
                      <div class="item-content">
                        <div class="item-data" style="color:#00DC29">{{ memo.runHour }}<span
                            class="item-data-small">H</span>{{ memo.runMinute }}<span
                            class="item-data-small">M</span></div>
                        <div class="item-title">运行时长</div>
                      </div>
                      <div class="item-content">
                        <div class="item-data" style="color:#36DEB6">{{ memo.num_day }}<span
                            class="item-data-small">件</span></div>
                        <div class="item-title">日产量</div>
                      </div>
                    </div>
                    <div class="bottom-line"></div>
                    <div class="bottom-content">
                      <div class="item-content">
                        <div class="item-data" style="color:white;">
                          {{ memo.moldName || "-" }}
                        </div>
                        <div class="item-title">工装夹具</div>
                      </div>
                      <div class="item-content">
                        <div class="item-data-content">{{ memo.stepName || "-" }}</div>
                        <div class="item-title">工序</div>
                      </div>
                      <div class="item-content">
                        <div class="item-data" style="color:orange">
                          <div class="item-small">{{ memo.rate }}</div>
                        </div>
                        <div class="item-title">稼动率</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </transition>
          </div>
        </div>
        <div v-else class="page-box">
          <div class="no-data">
            <el-empty description=" " image="/img/chengbang/empty-no-data.svg"/>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<style lang="scss" scoped src="./index.scss">

</style>